<template>
	<view class="activityDetail">
		<v-card class="view" padding="0">
			<view class="view-block">
				<image class="view-block-img" :src="csImg" mode="widthFix"></image>
				<view class="view-block-type">
					饭搭
				</view>
			</view>
		</v-card>
		<v-card class="operate">
			<view class="operate-block">
				<view class="operate-name">
					饭搭1111
				</view>
				<u-form-item :labelWidth="item.labelWidth || 100" :label="item.label + '：'" :leftIcon="item.pic" prop="userInfo.sex" borderBottom  v-for="(item, index) in myData" :key="index">
					<u--input
						v-model="userInfo.re"
						disabled
						disabledColor="#ffffff"
						border="none"
					>
					</u--input>
				</u-form-item>
			</view>
		</v-card>
		<v-card class="address" padding="0">
			<view class="address-block">
				<view class="address-icon">
					<u-icon name="map" color="#f0ad4e" size="18"></u-icon>
				</view>
				
				<view class="address-text">
					饭搭
				</view>
			</view>
		</v-card>
		<Activity></Activity>
		<CustomActions></CustomActions>
		<v-nav></v-nav>
	</view>
</template>

<script>
import Activity from './components/activity.vue'
import CustomActions from './components/customActions.vue'

const csImg = '/static/images/login_top.png'
export default {
	components: {
		Activity,
		CustomActions
    },
	data() {
		return {
			csImg: csImg,
			userInfo: {
				re: '发起人'
			},
			
			myData: [
				{
					label: '发起人',
					pic: '/static/images/avatar_boy.png'
				},
				{
					label: '时间',
					pic: '/static/images/login_jian.png'
				},
				{
				  label: '报名截止',
				  pic: '/static/images/login_top.png'
				},
				{
					label: '状态',
					pic: '/static/images/icon-ds.png'
				},
				{
					label: '通过审核/报名/上限人数',
					pic: '/static/images/avatar_boy.png',
					labelWidth: 210
				},
				{
					label: '审核规则',
					pic: '/static/images/login_jian.png'
				},
				{
				  label: '取消规则',
				  pic: '/static/images/login_top.png'
				}
			]
		}
	},
	methods: {
	
	},
	onShow() {
	
	},
	onLoad() {

	},
}
</script>

<style lang="scss" scoped>
.activityDetail{
	padding: $contentPading $contentPading 100px;
	display: flex;
	flex-direction: column;
	background: $uni-bg-grey;
	margin-bottom: 100px;
	.address{
		margin-bottom: 20px;
		.address-block{
			padding: 15px 20px;
			position: relative;
			.address-text{
				text-indent: 2em;
				color: $uni-text-color;
			}
			.address-icon{
				position: absolute;
				left: 26px;
				top: 16px;
			}
		}
	}
	.operate{
		margin-bottom: 20px;
		.operate-block{
			.operate-name{
				font-size: 26px;
				font-weight: bold;
				padding: 15px 10px;
			}
		}
	}
	.view{
		margin-bottom: 20px;
		.view-block{
			.view-block-type{
				position: absolute;
				right: 10px;
				top: 10px;
				border-radius: 40%;
				background: $uni-color-warning;
				padding: 10px 20px;
			}
			.view-block-img{
				width: 100%;
			}
		}
	}
}
</style>
